<template>
  <div>
     <div class="backBtn iconfont icon-icon_left" @click="$router.back()"></div>
     <div class="tit">
         <p>456阅读</p>
     </div>
     <div class="login">
         <p v-for="(tab,index) in tabConent" :key="index" :class="{class1:index==num}" @click="use(index)">{{tab.title}}</p>
         <!-- <p class="box" v-for="(list,index) in dataList" :key="index" :class="{'class1':clicked==index}" @click="use(index)">{{list}}</p> -->
     </div>
      <div class="tab" v-for="(tab,index) in tabConent"  :key="index" v-show="index ==num" v-html="tab.content">
            {{tab.content}}
         </div>
         <div class="mima"></div>
        <div class="sub">
            <span>安理会决定返回拉哈厉害了卡奥利加速度和flak积分阿里雕刻技法安德森看见<a>《用户协议》</a></span>
         <button>登  录</button>
         </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tabConent: [ {
        title: '短信登录',
        content: `<form>
             <input type="text" placeholder="请输入手机号...">
             <input type="text" placeholder="验证码">
             </form>`
      },
      {
        title: '密码登录',
        content: `<form>
             <input type="text" placeholder="请输入账号/用户名...">
             <input type="text" placeholder="密码">
             </form>`
      }],
      num: 0
    }
  },
  methods: {
    use (index) {
      this.num = index
    //   console.log(this.num)
    }
  }
}
</script>
<style>
.tit{
     font-size: 60px;
            color: #1296db;
            text-align: center;
            margin: 50px auto;
            width: 100%;
}

.backBtn{
    margin: 20px 0 0 10px;
    font-size: 24px;
    color: #1296db
}
.act_show{
    display: block
}
.login{
    width: 50%;
    height: 25px;
    margin: 0 auto;
}
.login p{
    width: 50%;
     float: left;
     text-align: center;
}
.class1{
   border-bottom: #1296db 3px solid
}
form{
    margin-top: 3px;
    width: 100%;
}
  input{
            width: 80%;
            height: 50px;
            border: 1px #cccccc solid;
            padding-left: 10px;
            margin: 10px 30px
        }
          .sub{
            width: 80%;
            margin: 0 auto;
        }
        .sub span{
            font-size: 14px;
            color: rgb(158, 156, 156);
            width: 100%;
        }
        .sub a{
            color: #1296db;
        }
        .sub button{
            background: #1296db;
            border: 1px solid #1296db;
            color: white;
            width: 100%;
            height: 45px;
            margin-top: 30px;
            font-size: 16px;
        }
</style>
